﻿<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<el-card shadow="hover" class="layout-padding-auto create-form">
			<el-form ref="formRef" :model="stateData.vmModel" label-width="120px">
				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>教育信息</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_School_FormItem" prop="Entity.School" :rules="[{ required: true, message: '学校为必填项', trigger: 'blur' }]">
								<template #label>
									<WtmLabelTooltip label="学校" tooltip="就读学校名称" />
								</template>
								<el-input v-model="stateData.vmModel.Entity.School" disabled clearable class="width100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_Major_FormItem" prop="Entity.Major">
								<template #label>
									<WtmLabelTooltip label="专业" tooltip="所学专业名称" />
								</template>
								<el-input v-model="stateData.vmModel.Entity.Major" disabled clearable class="width100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_EducationLevel_FormItem"
								prop="Entity.EducationLevel"
								:rules="[{ required: true, message: '学历为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="学历" tooltip="获得的学历层次" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.EducationLevel" disabled clearable class="width100">
									<el-option key="小学" value="小学" label="小学"></el-option>
									<el-option key="初中" value="初中" label="初中"></el-option>
									<el-option key="高中" value="高中" label="高中"></el-option>
									<el-option key="中专" value="中专" label="中专"></el-option>
									<el-option key="大专" value="大专" label="大专"></el-option>
									<el-option key="本科" value="本科" label="本科"></el-option>
									<el-option key="研究生" value="研究生" label="研究生"></el-option>
									<el-option key="硕士" value="硕士" label="硕士"></el-option>
									<el-option key="博士" value="博士" label="博士"></el-option>
									<el-option key="博士后" value="博士后" label="博士后"></el-option>
									<el-option key="博士研究生" value="博士研究生" label="博士研究生"></el-option>
									<el-option key="其他" value="其他" label="其他"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_EducationSystem_FormItem"
								prop="Entity.EducationSystem"
								:rules="[{ required: true, message: '学制为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="学制" tooltip="学制类型" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.EducationSystem" disabled clearable class="width100">
									<el-option key="全日制" value="全日制" label="全日制"></el-option>
									<el-option key="非全日制" value="非全日制" label="非全日制"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_EnrollmentDate_FormItem" prop="Entity.EnrollmentDate">
								<template #label>
									<WtmLabelTooltip label="入学日期" tooltip="入学的日期" />
								</template>
								<el-date-picker v-model="stateData.vmModel.Entity.EnrollmentDate" disabled clearable class="width100"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_GraduationDate_FormItem" prop="Entity.GraduationDate">
								<template #label>
									<WtmLabelTooltip label="毕业日期" tooltip="完成学业的日期" />
								</template>
								<el-date-picker v-model="stateData.vmModel.Entity.GraduationDate" disabled clearable class="width100"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="24" class="mb20">
							<el-form-item ref="SelectedEducationFilesIds_FormItem" prop="SelectedEducationFilesIds">
								<template #label>
									<WtmLabelTooltip label="学历证书" tooltip="学历、学位证书、毕业证书等附件信息" />
								</template>
								<wtm-upload-file v-model="stateData.vmModel.SelectedEducationFilesIds" clearable :multi="true" disabled></wtm-upload-file>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.common.vm.edit;false">
import { reactive, ref, getCurrentInstance, onMounted, nextTick } from 'vue';
import { SysPersonEducationApi as api } from '/@/views/person/syspersoneducation/api';
import other from '/@/utils/other';
import { ISysPersonEducationVm } from '/@/views/person/syspersoneducation/api/interface';
import { IViewModel } from '/@/types/common';

const ci = getCurrentInstance() as any;
const loading = ref(false);
// 定义变量内容
const formRef = ref();
const stateData = reactive<IViewModel<ISysPersonEducationVm>>({
	vmModel: {
		Entity: {
			ID: null,
			PersonId: null,
			School: null,
			Major: null,
			EducationLevel: null,
			EducationSystem: null,
			EnrollmentDate: null,
			GraduationDate: null,
		},
		SelectedEducationFilesIds: [],
	},

	AllSysPersons: [] as any[],
});

// 取消
const onClose = () => {
	closeDialog();
};

// 页面加载时
onMounted(() => {
	loading.value = true;
	if (ci.attrs['wtmdata']) {
		stateData.vmModel.Entity.ID = ci.attrs['wtmdata'].ID;
	}
	const promises: Promise<any>[] = [
		api()
			.get(stateData.vmModel.Entity.ID ?? '')
			.then((data: any) => other.setValue(stateData.vmModel, data)),
	];
	Promise.allSettled(promises).finally(() => {
		loading.value = false;
		nextTick(() => {
			setupHeaderButtons();
		});
	});
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);
// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};
// 设置对话框头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: ci.proxy.$t('message._system.common.vm.cancel'),
			type: 'default',
			onClick: onClose,
			visible: true,
		},
	];

	emit('updateHeaderButtons', headerButtons);
};
</script>
